<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
    <meta name="author" content="Coderthemes">

    <link rel="stylesheet" href="/adminstatic/base/base.css"/>
    <script src="/adminstatic/base/baseCss.js"></script>

    <style type="text/css">
        html, body {
            background: #fff;
        }
        #wrapper{
            overflow: unset;
        }

        .layui-input-block {
            margin-left: 0;
        }
    </style>
</head>

<body class="fixed-left">

<!-- Begin page -->
<div id="wrapper">

    <div class="container">

        <div class="panel panel-default" style="box-shadow: none">
            <div class="panel-body">
                <form class="layui-form" action="">
                    <div id="inputForm" class="form-horizontal">
                        <div class="row" style="padding:0 20px">
                            <div class="form-group">
                                <div class="col-xs-12 col-md-4 ">
                                    <label for="username"><small class="notNullFlag">*</small> 账户</label>
                                    <input class="form-control" type="text" id="username" name="username"
                                           value="" required>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-xs-12 col-md-4 ">
                                    <label for="password"><small class="notNullFlag">*</small> 密码</label>
                                    <input class="form-control" type="password" id="password" name="password"
                                           value=""
                                           required>
                                </div>
                            </div>


                            <div class="form-group">
                                <div class="col-xs-12 col-md-4 ">
                                    <label for="confirmPassword"><small class="notNullFlag">*</small> 确认密码</label>
                                    <input class="form-control" type="password" id="confirmPassword"
                                           name="confirmPassword"
                                           value=""
                                           required>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-xs-12 col-md-4 ">
                                    <label for="confirmPassword"><small class="notNullFlag">*</small> 选择角色</label>

                                    <div class="layui-form-item">
                                        <div class="layui-input-block" id="roleType">
                                            <input type="radio" name="roleType" value="0" title="超级管理员">
                                            <input type="radio" name="roleType" value="1" title="用户">
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-xs-12 col-md-4 ">
                                    <label><small class="notNullFlag">*</small> 头像</label>
                                    <div class="layui-form-item">
                                        <div class="layui-input-inline layui-btn-container" style="width: auto;">
                                            <button type="button" class="layui-btn layui-btn-primary"
                                                    id="LAY_avatarUpload">
                                                <i class="layui-icon">&#xe67c;</i>上传图片
                                            </button>
                                        </div>
                                    </div>

                                    <div class="layui-input-inline" id="avatar-preview">
                                        <div class="img-item">
                                            <img style="width: 100%;height: 100%;"
                                                 src=" ">
                                            <div class="img-tag">查看图片</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div id="actions">
                <button type="button" class="layui-btn layui-btn-normal" id="submitBtn">保存</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="closeIframe()">取消</button>
            </div>
        </div><!-- panel-body -->
    </div> <!-- panel -->

</div> <!-- container -->
</div>
<!-- END wrapper -->
<script src="/adminstatic/base/base.js"></script>
<script type="text/javascript">
    //
    var avatar = '';
    console.log(avatar)
    if (!vaildeParam(avatar)){
        $("#avatar-preview").hide();
    }


    var roleType = '';
    layui.use('form', function () {
        var form = layui.form;
        form.on('radio', function (data) {
            //获取单选的值
            roleType = data.value
            console.log(roleType)
        });
    });

    layer.photos({
        photos: '#avatar-preview'
        , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
    });
    //上传图片
    layui.use('upload', function () {
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#LAY_avatarUpload' //绑定元素
            , multiple: true
            // , size: 2048 //文件大小限制
            , number: 1 //文件数量限制
            , accept: 'images' //文件类型限制
            , acceptMime: 'image/*' //选择窗口属性
            , url: '/admin/upload/addFile' //上传接口
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.msg('上传中', {icon: 16, time: 0, shade: 0.01});
                obj.preview(function (index, file, result) {
                    // var files = obj.pushFile();
                    console.log(file)
                });
            }
            , done: function (res, index, upload) {
                layer.closeAll('loading');
                if (res.code === 0) {
                    layer.msg(res.msg, {icon: 1});
                    console.log(res.data)
                    avatar = res.data;
                    $(".img-item img").attr("src", avatar);
                    $("#avatar-preview").show();
                    layer.photos({
                        photos: '#avatar-preview'
                        , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                    });

                }

                //获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增
                var item = this.item;
                //文件保存失败
                //do something
            }
            , error: function () {
                layer.closeAll('loading');
                //请求异常回调
                layer.msg("上传失败，请重试", {icon: 2});
            }

        });
    });





    $("#submitBtn").click(function () {
        var username = $("input[name='username']").val();
        if (!vaildeParam(username)) {
            layer.msg("账户不能为空", {icon: 5});
            return;
        }

        var password = $("input[name='password']").val();
        if (!vaildeParam(password)) {
            layer.msg("密码不能为空", {icon: 5});
            return;
        }

        var confirmPassword = $("input[name='confirmPassword']").val();
        if (!vaildeParam(confirmPassword)) {
            layer.msg("确认密码不能为空", {icon: 5});
            return;
        }

        if (password !== confirmPassword) {
            layer.msg("两次密码不正确", {icon: 5});
            return;
        }

        if (roleType === null || roleType === '') {
            layer.msg("请选择角色", {icon: 5});
            return;
        }

        var avatarImg = $('#avatar-preview img')[0].src;
        if (!vaildeParam(avatar)) {
            layer.msg("请上传头像", {icon: 5});
            return;
        }

        var api = '/admin/addAdmin';
        var data = {
            "username": username,
            "password": password,
            "avatarImg": avatarImg,
            "roleType": roleType,

        }

        postJSON(api, data, function (res) {
            cleanSuccess(res)
        })

    })
</script>
</body>
</html>